<template>
  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-gray-800 rounded-lg p-6 w-96 max-w-full">
      <!-- 标题和关闭按钮 -->
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-semibold text-white">个人中心</h2>
        <button @click="$emit('close')" class="text-gray-400 hover:text-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- 用户信息 -->
      <div class="space-y-6">
        <!-- 用户头像 -->
        <div class="flex justify-center">
          <div class="relative">
            <div class="w-24 h-24 bg-gradient-to-r from-[#8153ff] to-[#93dc24] rounded-full flex items-center justify-center text-white text-2xl font-bold">
              {{ userInitials }}
            </div>
            <button class="absolute bottom-0 right-0 bg-gray-700 hover:bg-gray-600 p-2 rounded-full text-white">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </button>
          </div>
        </div>

        <!-- 用户基本信息 -->
        <div class="bg-gray-700 rounded-lg p-4">
          <h3 class="text-lg font-medium mb-3">基本信息</h3>
          <div class="space-y-3">
            <div>
              <label class="block text-sm text-gray-400">用户名</label>
              <div class="font-medium mt-1">{{ user.username }}</div>
            </div>
            <div>
              <label class="block text-sm text-gray-400">邮箱</label>
              <div class="font-medium mt-1">{{ user.email || '未设置' }}</div>
            </div>
            <div>
              <label class="block text-sm text-gray-400">注册时间</label>
              <div class="font-medium mt-1">{{ formatDate(user.created_at) || '未知' }}</div>
            </div>
          </div>
        </div>

        <!-- 账户操作 -->
        <div class="bg-gray-700 rounded-lg p-4">
          <h3 class="text-lg font-medium mb-3">账户操作</h3>
          <div class="space-y-2">
            <button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-gray-600 transition-colors">
              <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span>编辑个人资料</span>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </button>
            <button class="w-full flex items-center justify-between p-3 rounded-lg hover:bg-gray-600 transition-colors">
              <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
                <span>修改密码</span>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>

        <!-- 退出登录 -->
        <button 
          @click="logout"
          class="w-full py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
        >
          退出登录
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue';

const props = defineProps({
  user: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['close', 'logout']);

// 获取用户名首字母作为头像
const userInitials = computed(() => {
  if (!props.user || !props.user.username) return '?';
  return props.user.username.charAt(0).toUpperCase();
});

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  
  try {
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  } catch (e) {
    return dateString;
  }
};

// 退出登录
const logout = () => {
  // 清除本地存储中的用户信息和token
  localStorage.removeItem('token');
  localStorage.removeItem('user');
  
  // 触发登出事件
  emit('logout');
  emit('close');
};
</script>

<style scoped>
.bg-opacity-50 {
  backdrop-filter: blur(4px);
}
</style> 